﻿@{
    ViewBag.Title = "Songs";
}

<h2>Songs</h2>

@Html.Partial("Styles")
@Html.Partial("Script")


<br />
<br />

<div align="center" style="overflow:auto">
    <table style="height:200px">
      <col width="500px">
      <col width="500px">
      <col width="100px">
      <col width="100px">
      <col width="100px">
      <col width="100px">
    <tr>
      <td><b>Title</b></td> 
      <td><b>Artist</b></td>
      <td><b>Duration(s)</b></td>
      <td><b>Price</b></td>
    </tr>


     @for (int i = 0; i < ViewBag.songs.Count; i++)
     {
         string artist = "";     
         <tr>
            <td>@ViewBag.songs[i].Title</td>
            <td>
                @for (int k = 0; k < ViewBag.songs[i].Artists.Count; k++)
                {
                    if (k == 0)
                    {
                        artist = ViewBag.songs[i].Artists[k].Name;
                    }
                    else
                    {
                        artist = artist + " & " + ViewBag.songs[i].Artists[k].Name;
                    }
                }
                @Html.Raw(artist)
            </td> 
            <td>@ViewBag.songs[i].Duration</td>
            <td>$@ViewBag.songs[i].Price</td>
            @if (ViewBag.type != "Y")
            {
                 <td> 
                    <label class="cartCheckBox">
                        <input type="checkbox" id="@ViewBag.songs[i].ID" onclick="TransactionCart(@ViewBag.typeSong, @ViewBag.songs[i].ID)"/>
                        <span></span>
                    </label>
                </td>
                <td> 
                    <label class="favCheckBox">
                        <input type="checkbox" id ="@("f" + ViewBag.songs[i].ID)" onclick="FavouriteCart(@ViewBag.typeSong, @ViewBag.songs[i].ID)"/>
                        <span></span>
                    </label>
                </td>
            }
            @if (ViewBag.type == "Y") //ADMIN
            {
               <td><input type="button" value ="Edit" onclick="EditSong(@ViewBag.songs[i].ID)" /></td> 
               <td><input type="button" value ="Delete" onclick="DeleteSong(@ViewBag.songs[i].ID)"/></td> 
                    
            }
            <td><input type="button" onclick="ViewSong(@ViewBag.songs[i].ID)" value="Details" /></td>
            <td>&nbsp&nbsp</td>
        </tr>
     }
    
    </table>
</div>











<script>
    function DeleteSong(ID)
    { 
        XMLhttpDeleteSong = new XMLHttpRequest();
        XMLhttpDeleteSong.open("POST", "/Products/DeleteSongAjax", true);
        XMLhttpDeleteSong.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        XMLhttpDeleteSong.onreadystatechange = reqReadyDeleteSong;
        sendStrDeleteSong = "songID=" + ID;
        XMLhttpDeleteSong.send(sendStrDeleteSong);
    }
    function reqReadyDeleteSong() {
        if (XMLhttpDeleteSong.readyState == 4 && XMLhttpDeleteSong.status == 200) {
            alert(XMLhttpDeleteSong.response);
                document.getElementById("refresh").click();

        } else if (XMLhttpDeleteSong.readyState == 4) {
            alert("error! code: " + XMLhttpDeleteSong.status);

        }
    }

</script>

<form action="/Products/Songs" method="post">
    <input type="submit" id="refresh" hidden="hidden"/>
</form>

